<template>
  <vxe-column v-bind="$attrs">
    <template v-slot="scope">
      <el-form-item v-if="isEdit(scope.row)" label="" :prop="$attrs.field">
        <el-input-number
          ref="inputWidget"
          style="width: 100%"
          :size="size"
          :miin="min"
          :max="max"
          :step="step"
          :precision="precision"
          :controls="false"
          :clearable="clearable"
          :disabled="disabled"
          :model-value="getRowData"
          @update:modelValue="onChange"
        />
      </el-form-item>
      <!-- 判断是否有default的slot -->
      <slot v-else-if="$slots.default" :row="scope.row" />
      <!-- 默认显示内容 -->
      <span v-else>{{ getRowValue(scope.row) }}</span>
    </template>
  </vxe-column>
</template>

<script setup lang="ts">
import { VxeColumn } from 'vxe-table';
import useTableInlineColumn from './useTableInlineColumn';

const emit = defineEmits(['change']);
type InlineNumberColumnProps = {
  size: string;
  min?: number;
  max?: number;
  step?: number;
  precision?: number;
  clearable: boolean;
  disabled: boolean;
};
const props = withDefaults(defineProps<InlineNumberColumnProps>(), {
  size: 'default',
  min: undefined,
  max: undefined,
  step: undefined,
  precision: undefined,
  clearable: true,
  disabled: false,
});
const inputWidget = ref();
const { isEdit, getRowData, getRowValue, onChange, reset } = useTableInlineColumn(
  false,
  emit,
  inputWidget,
);

defineExpose({
  reset,
  focus: () => {
    if (inputWidget.value) inputWidget.value.focus();
  },
});
</script>

<style></style>
